<script type="text/javascript" src="{{ asset('js/tree.js') }}"></script>
<script>
    layui.use(['layer', 'element','form','table','laypage','laytpl','tree','transfer','upload','laydate'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;
        var param = {}; 
        var tree = layui.tree;
        var transfer = layui.transfer;
        var upload = layui.upload;
        var laydate = layui.laydate;
        
        var group_ids = [];
        var transferCheckNum = 0; //tree选中的数量
        var transferInitNum = 0;
        sessionStorage.setItem('tree_group_ids1', group_ids);
        sessionStorage.setItem('tree_group_ids2', group_ids);

        //切换选项卡
        element.on('tab(tab-demo)', function(){
            let tabId = this.getAttribute('lay-id');
            //切换tab框之后清空穿梭框数据
            transfer.reload('transferId', {
                data: [],
                value:[]
            });
            if(tabId == 1){
                get_teacher_group();
            }else{
                get_default_group();
            }
        });

        //老师选择
        $('#teacher-selector').click(function(){      
            _transfer(function(){
                //获取当前选项卡的id
                let tabid = $('#tab-id').find('.layui-this').attr('lay-id');           
                if(tabid == 1){
                    get_teacher_group();
                }else{
                    get_default_group();
                }
            });
        })

        //获取默认分组数据
        function get_teacher_group(){
            getGroupAllBySchool({},function(res){
                if(res.code == 1){
                    tree.reload('treeId', {
                        data:res.data
                    });                            
                }                             
            })
        }

        //获取自定义分组数据
        function get_default_group(){
            getDfGroupMembers({},function(res){
                if(res.code == 1){
                    tree.reload('treeId', {
                        data:res.data
                    });
                }
            })
        }

        //穿梭框
        function _transfer(callback){
            layer.open({
                type: 1
                ,title:'选择成员'
                ,content: $('#view-teacher') 
                ,area: ['900px', '650px']
                ,success: function(layero, index){
                    //回调
                    callback();                    
                }
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,end: function() {
                    //去除已选样式，否则父视图会提交勾选数据
                    $('#view-teacher').find("input[type='checkbox']").remove();
                }
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    var getData = transfer.getData('transferId');  
                    if(getData.length>0){
                        let name = '';
                        for(var i = 0;i<getData.length;i++){
                            name += getData[i].title+',';
                        }
                        name = name.substring(0, name.length - 1);
                        $('input[name=teacher]').val(name);
                        $('input[name=teachers]').val(JSON.stringify(getData));
                        $('#view-teacher').hide();
                        layer.closeAll();
                    }else{
                        layer.msg('请选择成员', {icon: 5,shift : 6}); return  false;
                    }
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    $('#view-teacher').hide();
                }               
                ,cancel: function(){ 
                    //右上角关闭回调
                    $('#view-teacher').hide();
                }
            });
        }

        //穿梭框实例
        transfer.render({
            elem: '#chuansuo'
            ,data: []
            ,title:['用户列表','已选用户']
            ,id: 'transferId'
        })

        //树形组件实例
        tree.render({
            elem: '#tree1' //默认是点击节点可进行收缩
            ,data: []
            ,showCheckbox:true
            ,id: 'treeId'
            ,oncheck: function(obj){
                var checkData = tree.getChecked('treeId');
                //获取当前选项卡的id
                let tabid = $('#tab-id').find('.layui-this').attr('lay-id');
                if(tabid == 1){
                    getTeacherByGroupId({'group':checkData},function(res){
                        if(res.code == 1){ 
                            transfer.reload('transferId', {
                                data: res.data
                            });                                         
                        }
                    })
                }else{
                    getDfMembersToId({'group':checkData},function(res){
                        if(res.code == 1){ 
                            transfer.reload('transferId', {
                                data: res.data
                            });                                         
                        }
                    })
                }
                
            }
        });
    });
</script>

<div class="layuik-input-inline">
    <input id="teacher-selector" readonly type="text" name="teacher" value="" required  lay-verify="required" lay-reqText="参与老师不能为空" placeholder="请选择" autocomplete="off" class="layui-input">
    <input type="text" name="teachers" id="teachers" placeholder="请选择" autocomplete="off" class="layui-input layui-hide">
</div>
  
<!---选择老师--->
@include('common.groupTransfer')